<template>
   <div style="margin-bottom:20px">
        <el-select v-model="nowMonth" filterable 
         placeholder="请选择月份" style="width:30%"
         :change="selectChange(nowMonth)">
            <el-option
            v-for="item in month"
            :key="item.option"
            :value="item.option">
            </el-option>
        </el-select>月
        <el-select v-model="nowDay" filterable 
        placeholder="请选择日期" style="width:30%;">
            <el-option
            v-for="(item,index) in day"
            :key="index"
            :value="item">
            </el-option>
        </el-select>日<br>
        事件类型：
        <el-select v-model="type" filterable 
        placeholder="请选择类型" style="width:40%;margin-top:20px">
            <el-option
            v-for="(item,index) in types"
            :key="index"
            :label="item.label"
            :value="item.type">
            </el-option>
        </el-select>
        <div style="margin-top:20px">
             <el-button type="primary" @click="getNow">开始搜索</el-button>
        </div>
    </div>
</template>

<script>
import dataSelectValues from '../config/DataSelect.json'
export default {
  name: 'DataSelect',
  data (){
      return{
         dataSelectValues:dataSelectValues,
         month : [],
         day : [],
         types : [],
         nowMonth : '',
         nowDay : '',
         type : '1'
      }
  },
   mounted(){
    let date = new Date();
    this.nowMonth = date.getMonth() + 1;
    this.nowDay = date.getDate();
    this.getSelectValues()
  },
  methods:{
      getSelectValues(){
         this.month = this.dataSelectValues.month
         this.types = this.dataSelectValues.type
      },
      selectChange(nowMonth){
          let monthFeature = '';
          for (let index = 0; index < this.month.length; index++) {
             if(nowMonth == this.month[index].option){
                 monthFeature = this.month[index].feature
                 this.getDays(monthFeature);
             }
          }
      },
      getNow(){
            this.$emit('getNow',this.nowMonth,this.nowDay,this.type);
      },
      getDays(monthFeature){
          let days = this.dataSelectValues.day
           for (let index = 0; index < days.length; index++) {
             if(monthFeature === days[index].feature){
                 this.day = days[index].selectValues
             }
          }
      }
  }
}
</script>
<style  scoped>
</style>
